import styles from './Quiz.module.css'
import Image from "next/image";
import select_option from '../../../public/select_option.png'
import React from "react";

interface ChildProps {
    canSelect: boolean, //是否可以选择
    index: number,  //题目的序号，从0开始
    question: {
        index: number,
        questionName: string,
        answers:
            {
                id: number,
                answerContent: string,
                isCorrect: number
            }[]
    },
    onSelectChange: (options: { answerContent: string, isCorrect: number, isSelected: boolean, id: number }[]) => void; // 添加这行
}

const Quiz: React.FC<ChildProps> = ({canSelect, index, question, onSelectChange}) => {
    const answers = question && question.answers ? question.answers : []
    const opts = answers.map((answer, idx) => {
        return {
            ...answer,
            isSelected: false,
        }
    })
    const [options, setOptions] = React.useState(opts)

    const handleClick = (id: any) => {
        console.log(`option ${id} clicked`);
        // 更新选项的选中状态
        const updatedOptions = options.map(option => ({
            ...option,
            isSelected: option.id === id ? !option.isSelected : false
        }));
        setOptions(updatedOptions);
        onSelectChange(updatedOptions); // 在这里调用回调函数
    };

    return (
        <>
            {index !== 0 ? <hr className={styles.custom_separator}/> : null}
            <div className={styles.quiz}>
                <span className={styles.type}>单选题</span>
                <span className={styles.title}>
                    {index + 1}、{question? question.questionName : null}
                </span>
                <ul>
                    {options.map(option => (
                        <li
                            key={option.id}
                            className={option.isSelected && canSelect ? styles.selected_option : styles.option}
                            onClick={() => handleClick(option.id)}
                        >
                            {option.isSelected && canSelect ? (
                                <>
                                    {option.answerContent} <span><Image className={styles.selected_option_icon}
                                                                        src={select_option} alt="选中"/></span>
                                </>
                            ) : (
                                option.answerContent
                            )}
                        </li>
                    ))}
                    {/*<li className={styles.selected_option}>A：眼睛的瞳孔是固定不变的<span><Image*/}
                    {/*    className={styles.selected_option_icon} src={select_option} alt={'选中'}/></span></li>*/}
                    {/*<li className={styles.option}>B：眼睛的瞳孔是可以变化的</li>*/}
                    {/*<li className={styles.option}>C：眼睛的瞳孔是可以变化的</li>*/}
                    {/*<li className={styles.option}>D：眼睛的瞳孔是可以变化的</li>*/}
                </ul>
            </div>
        </>
    )
}

export default Quiz
